<template>
    <div class="containerBox editForm">
        <easyForm :fieldList="fieldList" :model="model" :options="options">
                
        </easyForm>
    </div>
  
</template>

<script lang="ts" setup>

import { ref , reactive, watch} from 'vue'
import { ElMessageBox, FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import { onBeforeRouteLeave } from 'vue-router';

const skillInfoList = [
    {id:"1",info:"情绪是人的心理很重要的组成部分，情绪管理并非情绪压抑，所以只有不断识别与理解我们的情绪来源，才能提高我们的心理柔韧性，从而做到恰当管理情绪。"},
    {id:"2",info:"夫妻双方原生家庭模式影响着当下的婚姻家庭模式，探讨与理解彼此的原生家庭模式，认识彼此的期待，恰当面对失望，从而构建成熟和谐的婚姻家庭。"},
    {id:"3",info:"摆脱传统观念和内在固有观念的干扰，勇敢追求爱与接受爱，面对困扰和误解的大胆沟通与澄清，真实的面对自己与对方的不完美，是建立长久恋爱关系的核心。"},
    {id:"4",info:"摆通过探索自己，认识自己各方面的盲点，从而可以恰当地适应环境，达到身心协调、身心健康的目的。"},
    {id:"5",info:"给予孩子提供恰当的安全基地，鼓励与引导孩子探索自我，探索环境，是亲子教育的核心。如何提供安全基地，做为父母要去首先要去理解自己早年的创伤与缺失，从而阻断代际传递，才能促进健康的亲子教育。"},
    {id:"6",info:"健康的性心理是生命核心动力旺盛的内在基础，也是亲密关系的基础。探索靠近自己的躯体感受，理解我们的性认知来源，将会促进我们健康的性心理发展。"},
    {id:"7",info:"恰当定位自己，恰当面对得失与困难，灵活看待职场中的各种关系，可以让我们的工作得心应手。"},
    {id:"8",info:"人际关系的好坏不在于朋友的多少，也不在于高大上的沟通技巧，核心在于我们是否可以拥有内在的安全感、信任感以及自我边界感。"},
    {id:"9",info:"在安全的咨询关系中，通过咨询师的陪伴与镜映，不断探索我们内在的潜意识，从而达到提升我们心智化功能的目的。"},
    {id:"10",info:"引导少儿建构健康的自尊方式，鼓励发展自我潜能，提升少儿自信，是每个少儿一生的生命财富。"},
    {id:"11",info:"心理创伤"},
    {id:"12",info:"描述一下你的擅长领域"},
    ];

    // 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        labelWidth:"140px",
        inlineFlag:false,
        avatar:'',
        name:'',
        phone:'',
        gender:1,
        consultantStyle:1,
        workTime:'',
        hourage: '',
        qualification:'',
        introduction:'',
        sendWord:'',
        skill:1,
        skillInfo:'',
    })

const formList = {
    base: [
        { label: '设置个人头像：', field: 'avatar', type:'upload' },
        { label: '姓名：', field: 'name',rules: [{required: true, message: '姓名不能为空'}], maxlength:15,},
        { label: '手机号：', field: 'phone',rules: [{required: true, message: '手机号不能为空'}], maxlength:11,},
        { label: '性别：', field: 'gender', type: 'radio', options: { labelkey: 'title', valueKey: 'val', data: [{ title: '男', val: 1 }, { title: '女', val: 0 }] } },
        { label: '咨询师类型：', field: 'consultantStyle', type: 'select', 
            options: { data: [{ label: '无', value: 1 }, 
            { label: '实习咨询师', value: 2 }, 
            { label: '成熟咨询师', value: 3 },
            { label: '资深咨询师', value: 4 }] } },
        { label: '从业时间：', field: 'workTime',type: 'date',rules: [{required: true, message: '从业时间不能为空'}],},
        { label: '咨询小时数：', field: 'hourage', rules: [{required: true, message: '咨询小时数不能为空'}], append: '小时', },
        { label: '专业资质：', field: 'qualification', rules: [{required: true, message: '专业资质不能为空'}], type: 'textarea', placeholder: '专业资质', maxlength:250,},
        { label: '自我介绍：', field: 'introduction', rules: [{required: true, message: '自我介绍不能为空'}], type: 'textarea', placeholder: '可以自己的心路历程，或是对心理咨询的看法和理解，或是个人咨询特点的介绍皆可。建议不要罗列个人资料，写普通方可看得明白的话语，更有利于用户贴近了解咨询师。', maxlength:500,},
        { label: '咨询寄语：', field: 'send_word', rules: [{required: true, message: '咨询寄语不能为空'}], type: 'textarea', placeholder: '专业资质', maxlength:40,},
        // 还有问题
        { label: '擅长领域：', field: 'skill', type: 'select', 
            options: { data: [{ label: '情绪管理', value: 1 }, 
            { label: '婚姻家庭', value: 2 }, 
            { label: '亲密关系', value: 3 },
            { label: '身心健康', value: 4 },
            { label: '亲子教育', value: 5 },
            { label: '性心理', value: 6 },
            { label: '职场问题', value: 7 },
            { label: '个人成长', value: 8 },
            { label: '儿童青少年', value: 9 },
            { label: '心理创伤', value: 10 },
            ] } },
        { field: 'skillInfo', rules: [{required: true, message: '请将擅长领域填写完整'}], type: 'textarea', placeholder: '', maxlength:500,},

          ],
          
}
const fieldList: Form.FieldItem[] = formList.base;
const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '提交',
    resetButtonText: '取消',
    showSubmitButton:true,
    // showResetButton:true,
    
};


const editFlag = ref(false);
watch(model.value, (newVal, oldVal) => {
    editFlag.value = true
    console.log(newVal, oldVal)
})

onBeforeRouteLeave((to, from, next) => {
    if(editFlag.value){
        ElMessageBox.confirm(
        '当前页面修改数据为保存，确定离开吗?',
        '温馨提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(() => {
            next()
        })
        .catch(() => {
            return false;
        })
    }else{
        next()
    }
})

</script>

<style scoped lang="scss">
.containerBox{
    // width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
</style>